<template>
  <div class="install">
    <div class="install_one">
      <van-card
        class="user"
        :title="title"
        thumb="https://b.yzcdn.cn/vant/icon-demo-1126.png"
      >
        <template #title>
          <span @click="login">{{ title }}</span>
        </template>
        <template #desc class="out-user">
          <div @click="leave" v-if="isShow">退出账号</div>
        </template></van-card
      >
      <div class="install_two">
        <div class="two">
          <p>8</p>
          <span>收藏夹</span>
        </div>
        <div class="two">
          <p>100</p>
          <span>关注店铺</span>
        </div>
        <div class="two">
          <p>123</p>
          <span>足迹</span>
        </div>
        <div class="two">
          <p>13</p>
          <span>红包卡券</span>
        </div>
      </div>
    </div>
    <div class="in_grid">
      <van-cell title="必备工具" is-link value="查看所有工具" />
      <van-grid :column-num="4">
        <van-grid-item
          v-for="value in 24"
          :key="value"
          icon="photo-o"
          text="文字"
        />
      </van-grid>
    </div>
  </div>
</template>
<script>
import { setCookie, getCookie, clearCookie, clearCookies } from '.././../cookies'
export default {
  data() {
    return {
      title: '',
      arr: [],
      isShow: this.$store.state.login.isShow
    }
  },
  methods: {
    getCookie() {
      if (getCookie('user') === undefined) {
        this.title = '请登录账号'
      } else {
        this.title = getCookie('user').username
        this.isShow = true
      }
    },
    leave() {
      clearCookies()
      this.title = '请登录账号'
      this.isShow = false
    },
    login() {
      if (getCookie('user') === undefined) {
        this.goDetail('/login', '')
      }
    }
  },
  created() {
    this.getCookie()
  }
}
</script>
<style lang="scss" scoped>
.install {
  background-color: #f1f1f1;
  .install_one {
    background-image: linear-gradient(to right, #fd9126, #ff5000);
    margin-bottom: 20px;
    .van-card {
      background-image: linear-gradient(to right, #fd9126, #ff5000);
      color: white !important;
    }
    .user {
      font-size: 16px;
      .out-user {
        font-size: 14px;
      }
      .van-card__title {
        max-height: 32px;
        font-weight: 600;
        margin-top: 6px;
        font-size: 20px;
        line-height: 35px;
      }
      .van-card__desc {
        margin-top: 25px;
      }
      .van-card__thumb {
        display: block;
        width: 55px;
        height: 55px;
        border: 1px solid white;
        border-radius: 50%;
        margin: 15px 5px 0px;
      }
    }
    .install_two {
      // background-image: linear-gradient(to right, #fd9126, #ff5000);
      color: white;
      display: flex;
      overflow: hidden;
      flex: 0 0 auto;
      height: 85px;
      width: 375px;
      align-self: flex-start;
      justify-self: flex-start;
      position: relative;
      .two {
        flex: 1;
        text-align: center;
        font-size: 14px;
        p {
          margin: 5px;
        }
      }
    }
  }
  .in_grid {
    overflow: hidden;
    width: 351px;
    height: auto;
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 12px;
    background-color: #ffffff;
  }
}
</style>
